<template>

<el-container direction:vertical style=" border:1px solid #eee">
    <el-table
      :data="tableData"
      stripe=true
      size="big"
      style=" width: 100%;"
      border:true>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别">
        <template slot-scope="{ row }">{{ row.gender == 0 ? '男' : '女' }}</template>
      </el-table-column>
      <el-table-column
        prop="height"
        label="身高">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="wechat"
        label="微信号">
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="入库时间">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-footer style="text-align: right; " >
      <span class="demonstration">调整每页显示条数</span>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next,total"
        :total=total>
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<style>

</style>

<script>
   import axios from 'axios';
 export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 1
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchTableData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchTableData();
    },
    fetchTableData() {
      axios.post('http://192.168.0.148:8888/drugStore/user/list',{
        limit: this.pageSize,
        page: this.currentPage
      })
        .then(response => {
          if (response.data.success) {
            this.total = Number(response.data.data.total)
            console.log(this.total)
            this.tableData = response.data.data.list.map(item => {
              return {
                createDate: item.createDate,
                name: item.name,
                city: item.city,
                mobile: item.mobile,
                gender: item.gender,
                height: item.height,
                wechat: item.wechat
              };
              
            });
          } else {
            this.$message.error('Failed to fetch data');
          }
        })
        .catch(error => {
          this.$message.error('An error occurred: ' + error.message);
        });
    },
    handleClick(row) {
      console.log('查看', row);
    },
    handleEdit(row) {
      console.log('编辑', row);
    }
  },
  mounted() {
    this.fetchTableData();
  }
};
</script>